<template>
    <div class="wrapper" ref="aaa">
        <ul class="conten">

        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        <li>分裂列表</li>
        </ul>
    </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    name: "Category",
    data(){
        return {
            scroll: null
        }
    },
    // created(){
    //     this.scroll = new BScroll('.conten', {
           
    //     })
    // }
    // 组件创建完后调用
    mounted(){
        // console.log(this.$refs.aaa);
        // console.log(document.querySelector('.wrapper'));
        // 默认情况下BScroll是不可以实时的监听滚动位置
        // probe侦测
        // 0,1都是不侦测实时的位置
        // 2：在手指滚动的过程中侦测，手指离开后的惯性滚动过程中不侦测
        // 3：只要是滚动，都侦测
        this.scroll = new BScroll(this.$refs.aaa ,{
            probeType: 3,
            pullUpLoad: true
        })
        this.scroll.on('scroll',(position) => {
            console.log(position);
        })
        this.scroll.on('pullingUp',() => {
            console.log('上啦加载更多');
        })
    }
}
</script>

<style scoped>
.wrapper{
    height: calc(100% - 93px);
    background-color: red;

    /* overflow: hidden; */
    /* overflow-y: auto; */
}
</style>